<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, watch, defineEmits, onMounted, reactive } from 'vue'
import getAssetsFile from '../utils/pub-use'
import  agentMgr  from '../utils/ai-agent'
import { onlineImagePathWithFileId,gotoChatPage } from '../utils/lib'
import { type AIAgent } from '../utils/interface'
const router = useRouter()
let models2 = ref([] as AIAgent[][])
const emit = defineEmits(['toChat'])
const pageIndx = ref<number>(1);
const loadData = (models: AIAgent[]) => {
  let colNum = 3
  let modelTemp: Array<Array<AIAgent>> = []
  models.forEach((model: AIAgent, index) => {
    if (index % colNum === 0) {
      modelTemp.push([])
    }
    modelTemp[Math.floor(index / colNum)].push(model)
  })
  models2.value = modelTemp
}
const refList = ref<HTMLElement[]>([]);
const overflown = ref([])

const tabList = reactive([
  {name:"推荐",value:1},
  {name:"创作",value:2},
  {name:"学习",value:3},
  {name:"编程",value:4},
  {name:"营销",value:5},
  {name:"工作",value:6},
  {name:"趣味",value:7}
])
const isActive = ref(1);
const getListRef = (el:any,rowIndex:number,cellIndex:number) => {
  if(el){
    refList.value[rowIndex * 3 + cellIndex] = el;
  }
}
const onmouseover = (rowIndex:number,cellIndex:number) => {
  const container = refList.value[rowIndex * 3 + cellIndex];
  overflown.value[rowIndex * 3 + cellIndex] = container && container.scrollHeight  > container.offsetHeight
}
const changeTab = (item:any) => {
  isActive.value = item.value
}

const toChat = (model: any) => {
  emit('toChat', model, 'agent')
}

onMounted(async () => {
  const agentList = await agentMgr.searchAgents(pageIndx.value);
  loadData(agentList)
})
</script>

<template>
    <div class="square-wrap">
      <div class="title">智能体广场</div>
      <div class="tabs">
        <span
          v-for="item in tabList"
         :key="item.value"
         :class="isActive == item.value ? 'current' : ''" 
         @click="changeTab(item)"
        >{{ item.name }}</span>
      </div>

      <div class="actions-container">
        <el-row v-for="(row, rowIndex) in models2" :key="rowIndex" :gutter="16">
          <el-col
            v-for="(model, cellIndex) in row"
            :span="8"
            :key="cellIndex"
            @click="gotoChatPage(router, model.id)"
          >
            <div class="acitons-item-container">
              <div class="action-icon" :class="model.logoUrl ? '' : 'defaut-icon'">
                <img
                  :src="
                    model.logoUrl
                      ? onlineImagePathWithFileId(model.logoUrl)
                      : getAssetsFile(model.icon)
                  "
                />
              </div>
              <div class="action-content">
                <p class="title">{{ model.name }}</p>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="model.subTitle"
                    placement="bottom"
                    :disabled="!overflown[rowIndex * 3 + cellIndex]"
                  >
                  <p class="sub-title" @mouseover="onmouseover(rowIndex,cellIndex)" :ref="el => getListRef(el,rowIndex,cellIndex)">{{ model.subTitle }}</p>
                </el-tooltip>
                
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<style lang="scss" scoped>
  .square-wrap {
    height: 100%;
    .title{
      font-weight: 600;
      font-size: var(--crp-font-size-extra-large);
      color: var( --crp-text-color-important);
      line-height: 20px;
    }
    .tabs {
      display: flex;
      align-items: center;
      margin: var(--crp-margin-large) 0;
      span{
        padding: var(--crp-padding-middle) var(--crp-padding-large);
        line-height: 20px;
        background: var(--crp-bg-color);
        border-radius: var(--crp-border-radius-small);
        border: 1px solid var(--crp-border-color-btn);
        font-weight: 400;
        font-size: var(--crp-font-size-base);
        color: var(--crp-text-color-important);
        cursor: pointer;
      }
      span:not(:last-child){
        margin-right: var(--crp-margin-small);
      }
      .current{
        color: var(--crp-colors-primary-base);
        background: var(--crp-bg-color-tag);
        border: 1px solid var(--crp-colors-primary-base);
      }
    }
    .actions-container {
      --crp-icon-size: 40px;
      height: calc(100% - 20px - 82px);
      overflow: auto;
      scrollbar-width: none;
      .acitons-item-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: var( --crp-margin-base);
        padding: var(--crp-padding-large) var(--crp-padding-base) var(--crp-padding-large) var(--crp-padding-large);
        border-radius: var(--crp-border-radius-middle);
        background: var(--crp-bg-color);
        box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.05);
        cursor: pointer;
        .action-icon {
          width: 56px;
          height: 56px;
          margin-right: var(--crp-margin-middle);
          border-radius: var(--crp-border-radius-middle);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .defaut-icon{
          background: var(--crp-bg-color-tag);
          padding: 12px;
        }
        .action-content {
          flex: 1;
          min-width: 0;
          .title {
            font-weight: 600;
            font-size: var(--crp-font-size-large);
            color: var(--crp-text-color-important);
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .sub-title {
            margin-top: 6px;
            font-weight: 400;
            font-size: var(--crp-font-size-base);
            color: var(--crp-text-color-secondary);
            line-height: 20px;
            height: 40px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
